<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QNVR 预览与配置</title>
  <style>
    body { font-family: system-ui; padding: 12px; }
    img { width: 100%; max-width: 640px; background: #000; }
    .row { margin: 8px 0; }
    label { display: inline-block; width: 100px; }
    select { width: 200px; }
  </style>
  <script>
    let encoders = []; // 存储可用编码器列表
    
    // 页面加载时获取编码器列表
    async function loadEncoders() {
      try {
        const response = await fetch('/api/encoders');
        encoders = await response.json();
        const encoderSelect = document.getElementById('encoderName');
        encoderSelect.innerHTML = '<option value="">自动选择</option>';
        
        encoders.forEach(encoder => {
          const option = document.createElement('option');
          option.value = encoder.name;
          option.textContent = encoder.displayName;
          if (encoder.name === document.getElementById('encoderName').dataset.current) {
            option.selected = true;
          }
          encoderSelect.appendChild(option);
        });
      } catch (e) {
        console.error('Failed to load encoders:', e);
      }
    }
    
    async function refresh() {
      const s = await fetch('/api/config').then(r=>r.json())
      const rtsp = document.getElementById('rtsp')
      rtsp.textContent = s.rtsp
      rtsp.href = s.rtsp
      const web = document.getElementById('web')
      web.textContent = s.web
      web.href = s.web
      document.getElementById('deviceName').value = s.deviceName || ''
      document.getElementById('showDeviceName').checked = !!s.showDeviceName
      document.getElementById('username').value = s.username || 'admin'
      document.getElementById('password').value = s.password || ''
      document.getElementById('port').value = s.port || 18554  // 将默认端口从8554改为18554
      document.getElementById('bitrate').value = s.bitrate || 4000000
      document.getElementById('useSoftwareEncoder').checked = !!s.useSoftwareEncoder
      // 设置编码器选项
      document.getElementById('encoderName').dataset.current = s.encoderName || '';
      document.getElementById('mimeType').value = s.mimeType || 'video/avc';
      
      // 加载编码器列表
      await loadEncoders();
      
      const res = `${s.width}x${s.height}`
      document.getElementById('resolution').value = res
    }
    
    async function applyCfg() {
      const torch = document.getElementById('torch').checked
      const watermark = document.getElementById('watermark').checked
      const zoom = parseFloat(document.getElementById('zoom').value)
      const deviceName = document.getElementById('deviceName').value
      const showDeviceName = document.getElementById('showDeviceName').checked
      const username = document.getElementById('username').value
      const password = document.getElementById('password').value
      const port = parseInt(document.getElementById('port').value, 10)
      const bitrate = parseInt(document.getElementById('bitrate').value, 10)
      const useSoftwareEncoder = document.getElementById('useSoftwareEncoder').checked
      const encoderName = document.getElementById('encoderName').value || null
      const mimeType = document.getElementById('mimeType').value
      const [width, height] = document.getElementById('resolution').value.split('x').map(x=>parseInt(x,10))
      await fetch('/api/config', {method:'POST', body: JSON.stringify({torch, watermark, zoom, deviceName, showDeviceName, username, password, port, bitrate, useSoftwareEncoder, encoderName, mimeType, width, height})})
      refresh()
    }
    
    function startPreview() {
      const img = document.getElementById('mjpeg')
      img.src = '/stream.mjpg'
    }
    
    window.onload = ()=>{ refresh(); startPreview(); }
  </script>
</head>
<body>
  <h2>QNVR 预览</h2>
  <img id="mjpeg" alt="预览" />
  <div class="row">RTSP 地址：<a id="rtsp" href="#" target="_blank"></a></div>
  <div class="row">Web 地址：<a id="web" href="#" target="_blank"></a></div>
  <h3>参数配置</h3>
  <div class="row"><label>设备名</label><input id="deviceName" type="text"></div>
  <div class="row"><label>显示设备名</label><input id="showDeviceName" type="checkbox"></div>
  <div class="row"><label>用户名</label><input id="username" type="text" value="admin"></div>
  <div class="row"><label>密码</label><input id="password" type="password"></div>
  <div class="row"><label>RTSP 端口</label><input id="port" type="number" min="1024" max="65535" value="18554"></div>  <!-- 将默认端口从8554改为18554 -->
  <div class="row"><label>码率</label><input id="bitrate" type="number" min="500000" step="100000" value="4000000"></div>
  <div class="row"><label>帧率</label><input id="fps" type="number" min="1" max="30" value="30"></div>
  <div class="row"><label>编码格式</label>
    <select id="mimeType">
      <option value="video/avc">H.264/AVC</option>
      <option value="video/hevc">H.265/HEVC</option>
      <option value="video/x-vnd.on2.vp8">VP8</option>
      <option value="video/x-vnd.on2.vp9">VP9</option>
    </select>
  </div>
  <div class="row"><label>编码器</label><select id="encoderName"></select></div>
  <div class="row"><label>软件编码</label><input id="useSoftwareEncoder" type="checkbox"></div>
  <div class="row"><label>分辨率</label>
    <select id="resolution">
      <option value="1280x720">1280x720</option>
      <option value="1920x1080">1920x1080</option>
      <option value="640x480">640x480</option>
    </select>
  </div>
  <div class="row"><label>手电筒</label><input id="torch" type="checkbox"></div>
  <div class="row"><label>时间水印</label><input id="watermark" type="checkbox" checked></div>
  <div class="row"><label>变焦</label><input id="zoom" type="range" min="1" max="4" step="0.1" value="1"></div>
  <button onclick="applyCfg()">应用</button>
</body>
</html>